<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>详情页</title>
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE"/>
    <link rel="stylesheet" href="/order/css/bootstrap.css"/>
    <link rel="stylesheet" href="/order/css/scss.css"/>
    <link rel="stylesheet" href="/order/css/index_head.css">
    <link rel="stylesheet" href="/common/css/footer.css">
    <link rel="stylesheet" href="/common/css/base.css">
    <script src="/common/js/jquery.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
<div id="max">
    <div class='header'>
        <div class="top">
            <div class="w clearfix">
                <div class='setNav fr'>
                    <ul>
                        <li id="userFather">
                            <a th:if="${session.loginUser == null}" id="login_btn" href="http://localhost:11000/auth/login.html" >
                                登录
                            </a>
                            <a th:if="${session.loginUser == null}" href="http://localhost:11000/auth/reg.html">
                                注册
                            </a>
                            <a th:if="${session.loginUser != null}">
                                欢迎, [[${session.loginUser.nickname}]]
                            </a>
                            <a th:if="${session.loginUser != null}" href="http://localhost:11000/auth/logout.html">
                                立即退出
                            </a>
                        </li>
                        <li class="line">
                        </li>
                        <li>
                            <a href="http://localhost:11000/orderList.html">我的订单</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- //顶部按钮区域结束 -->
        <div class="w">
            <div class="top_search clearfix">
                <a href="http://localhost:11000">
                    <div class="logo fl">
                        <h1></h1>
                    </div>
                </a>
                <div class="search fl">
                    <form action="http://localhost:11000/list.html" method="get" style="display: flex">
                        <input name="keyword" type="text" id="ipt" placeholder="">
                        <button>搜索</button>
                        <ul id="list"></ul>
                    </form>
                </div>
                <div class="shop_car fr">
                    <a href="http://localhost:11000/cart/cart.html">购物车</a>
                </div>
            </div>
        </div>
        <!-- logo及 搜索框结束 -->
        <div class="w">
            <div class="tab clearfix">
                <div class="fl s_show">
                    <a href="" class="logo_s"></a>
                </div>
                <ul class="fl clearfix" >
                    <li class="tabItem">
                        <a href="http://localhost:11000">首页</a>
                    </li>
                    <li class="tabItem" th:each="cat1:${category}">
                        <a th:text="${cat1.getName()}">居家生活</a>
                        <div class="tabChild clearfix">
                            <dl th:each="cat2:${cat1.getCat2()}">
                                <dt th:text="${cat2.getName()}">夏季焕新</dt>
                                <dd th:each="cat3:${cat2.getCat3()}">
                                    <a th:href="@{'http://localhost:11000/list.html?catalog3Id='+${cat3.getId()}}">
                                        <span th:text="${cat3.getName()}">夏凉尝鲜</span></a>
                                </dd>
                            </dl>
                        </div>
                    </li>
                </ul>

                <div class="fr s_show">
                <span class="log fl">
                        <ul class='setItem'>
                            <li th:if="${session.loginUser == null}">
                                <a href="http://localhost:11000/auth/login.html" >
                                    登录
                                </a>
                            </li>
                            <li th:if="${session.loginUser == null}">
                                <a href="http://localhost:11000/auth/reg.html">
                                    注册
                                </a>
                            </li>
                            <li th:if="${session.loginUser != null}">
                                <a href="http://localhost:11000/auth/logout.html">
                                    退出
                                </a>
                            </li>
                        </ul>
                    </span>
                    <a href="http://localhost:11000/cart/cart.html">
                    <span class="show_car fl">
                    </span>
                    </a>
                </div>
            </div>

        </div>
        <!-- tab区域结束 -->
    </div>
    <!--等待付款内容-->
    <div class="content">
        <div class="order-state01">
            <div class="state-cont">
                <!-- 工具条 -->
                <div class="state-lcol">
                    <div class="state-top" style="font-size: 14px">订单号：[[${order.orderSn}]]</div>
                    <h3 class="state-txt" th:if="${order.status == 0}">等待付款</h3>
                    <h3 class="state-txt" th:if="${order.status == 1}">已付款</h3>
                    <h3 class="state-txt" th:if="${order.status == 2}">已发货</h3>
                    <h3 class="state-txt" th:if="${order.status == 3}">已完成</h3>
                    <h3 class="state-txt" th:if="${order.status == 4}">已关闭</h3>
                    <h3 class="state-txt" th:if="${order.status == 5}">售后中</h3>
                    <h3 class="state-txt" th:if="${order.status == 6}">售后结束</h3>
                    <h3 class="state-txt" th:if="${order.status == 5 || order.status == 6}">
                        售后：
                        <span th:if="${orderReturn.status} == 0">待处理</span>
                        <span th:if="${orderReturn.status} == 1">
                            退货中，请将商品退回<br><br>
                            <span>
                                地址：[[${orderReturn.companyAddress}]]
                            </span>
                            <br><br>
                            <span>
                                收货人：[[${orderReturn.receiveMan}]]
                            </span>
                            <br><br>
                            <span>
                                电话：[[${orderReturn.receivePhone}]]
                            </span>
                        </span>
                        <span th:if="${orderReturn.status} == 2">已完成</span>
                        <span th:if="${orderReturn.status} == 3">已拒绝</span>
                    </h3>
                    <button type="button" class="btn btn-success confirm" th:attr="orderSn=${order.orderSn}" th:if="${order.status==2}" >
                        确认收货
                    </button>
                    <button type="button" class="returnProduct btn btn-danger" th:attr="orderSn=${order.orderSn}"
                            th:if="${order.status==2}"
                            data-toggle="modal" data-target="#myModal">
                        申请售后
                    </button>
                    <button type="button" class="gotoPay btn btn-success" th:attr="orderSn=${order.orderSn}" th:if="${order.status==0}">
                        去支付
                    </button>
                    <button type="button" class="cancel btn btn-danger" th:attr="orderSn=${order.orderSn}" th:if="${order.status==0 || order.status==1}">
                        取消订单
                    </button>
                </div>
            </div>
            <!-- 模态框（Modal） -->
            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal"
                                    aria-hidden="true">×
                            </button>
                            <h4 class="modal-title" id="myModalLabel">
                                申请售后
                            </h4>
                        </div>
                        <div class="modal-body">
                            <form class="form-horizontal" role="form" th:action="@{/return}" method="post">
                                <div class="form-group">
                                    <div class="col-sm-10">
                                        <input type="hidden" class="form-control" id="orderSn"
                                               name="orderSn"
                                               th:value="${order.orderSn}">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="reason" class="col-sm-2 control-label">申请原因</label>
                                    <div class="col-sm-10">
                                        <input type="text" class="form-control" id="reason"
                                               name="reason"
                                               placeholder="请输入">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="returnAmount" class="col-sm-2 control-label">退款金额</label>
                                    <div class="col-sm-10">
                                        <input type="text" class="form-control returnAmountInput" id="returnAmount"
                                               name="returnAmount"
                                               placeholder="请输入少于等于订单金额的数字"
                                               oninput="value=value.replace(/[^\d]/g,'')">
                                    </div>
                                </div>
                                <button type="submit" class="btn btn-default">
                                    提交
                                </button>
                            </form>
                        </div>
                    </div><!-- /.modal-content -->
                </div><!-- /.modal-dialog -->
            </div><!-- /.modal -->
        </div>
        <!--配送信息-->
        <div class="sta_xinxi">
            <ul>
                <li>
                    <div class="dl">
                        <div class="dt">
                            <h4>收货人信息
                            </h4>
                        </div>
                        <div class="dd">
                            <div class="item">
                                <span class="label">收货人：</span>
                                <div class="info-rcol" th:text="${order.receiverName}">
                                    张亚飞
                                </div>
                            </div>
                            <div class="item">
                                <span class="label">地址：</span>
                                <div class="info-rcol"
                                     th:text="${order.receiverProvince}+${order.receiverCity}+${order.receiverRegion}+${order.receiverDetailAddress}">
                                    北京昌平区六环以内北京吉利大学学生公寓-马池口镇吉利大学
                                </div>
                            </div>
                            <div class="item">
                                <span class="label">手机号码：</span>
                                <div class="info-rcol" th:text="${order.receiverPhone}">
                                    147****4726
                                </div>
                            </div>

                        </div>
                    </div>
                </li>
                <li>
                    <div class="dl" th:if="${order.deliverySn}">
                        <div class="dt">
                            <h4>配送信息</h4>
                        </div>
                        <div class="dd">
                            <div class="item">
                                <span class="label">
                                    配送方式：
                                </span>
                                <div class="info-rcol" th:text="${order.deliveryCompany}">
                                    普通快递
                                </div>
                            </div>
                            <div class="item">
                                <span class="label">
                                    快递单号：
                                </span>
                                <div class="info-rcol" th:text="${order.deliverySn}">
                                    普通快递
                                </div>
                            </div>
                            <div class="item">
                                <span class="label">
                                    运费：
                                </span>
                                <div class="info-rcol">
                                    <span class="f-price" th:text="${order.freightAmount}">
                                        ¥12.00
                                    </span>
                                </div>
                            </div>
                            <div class="item">
                                <span class="label">
                                    发货时间：
                                </span>
                                <div class="info-rcol" th:text="${#dates.format(order.deliveryTime, 'yyyy-MM-dd HH:mm')}">
                                    2018-01-01
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="dl" id="pay-info-nozero">
                        <div class="dt">
                            <h4>付款信息</h4>
                        </div>
                        <div class="dd">
                            <div class="item">
								<span class="label">
                                    付款方式：
                                </span>
                                <div class="info-rcol">
                                    在线支付
                                </div>
                            </div>

                            <div class="item">
                                <span class="label">
    							商品总额：
    						    </span>
                                <div class="info-rcol">
                                    <span class="f-price" th:text="${order.totalAmount}">
                                        ¥21.80
                                    </span>
                                </div>
                            </div>
                            <div class="item">
                                <span class="label">
						            运费金额：
					            </span>
                                <div class="info-rcol">
                                    <span class="f-price" th:text="${order.freightAmount}">
                                        ¥12.00
                                    </span>
                                </div>
                            </div>
                            <div class="item">
                                <span class="label">
							        应支付金额：
                                </span>
                                <div class="info-rcol">
                                    <span class="f-price" th:text="${order.payAmount}">
                            	        ¥33.80
							        </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
                <li>


                </li>
            </ul>
        </div>
        <!--商品信息-->
        <div class="shop_sta_xinin">
            <table>
                <tr>
                    <th style="width: 500px;">商品</th>
                    <th>商品编号</th>
                    <th>商城价</th>
                    <th>商品数量</th>
                </tr>
                <tr th:each="item:${order.itemEntities}">
                    <td><img th:src="${item.skuPic}" src="/detail/image/5886ffa5Na5e39e2d.jpg"/>
                        <div>
                            <a th:href="@{'http://localhost:11000/'+${item.skuId}+'.html'}" th:text="${item.skuName}">
                                @{'/param?id='+${id}}
                                伊利 风味发酵乳 原味酸奶100g*8（两件起售）
                            </a>
                            <p class="txt" th:text="${item.skuAttrsVals}">益消 原味八连杯100g*</p>
                        </div>
                    </td>
                    <td th:text="${item.skuId}">1778772</td>
                    <td>¥[[${#numbers.formatDecimal(item.realAmount,3,2)}]]</td>
                    <td th:text="${item.skuQuantity}">2</td>
                </tr>
            </table>
            <div class="ccccc">
                <div class="right">
                    <div class="shuxing">
                        <p>商品总额：</p>
                        <p>运　　费：</p>
                        <p style="color: red;">应付总额：</p>
                    </div>
                    <div class="shuxingzhi">
                        <p>¥[[${#numbers.formatDecimal(order.totalAmount,3,2)}]]</p>
                        <p>¥[[${#numbers.formatDecimal(order.freightAmount,1,2)}]]</p>
                        <p class="p1">¥[[${#numbers.formatDecimal(order.payAmount,3,2)}]]</p>

                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

</body>
<script type="text/javascript">

    $('.confirm').click(function () {
        var orderSn = $(".confirm").attr("orderSn");
        if(confirm("确认收货？")){
            location.href = "http://localhost:11000/confirm/" + orderSn;
        }
    });
    $('.cancel').click(function () {
        var orderSn = $(".cancel").attr("orderSn");
        if(confirm("取消订单？")){
            location.href = "http://localhost:11000/cancelOrder/" + orderSn;
        }
    });
    $('.gotoPay').click(function () {
        var orderSn = $(".gotoPay").attr("orderSn");
        location.href = "http://localhost:11000/payOrder?orderSn=" + orderSn;
    });






    $('.uls .i1').hover(function () {
        $('.xian_hied').css('display', 'block')
    }, function () {
        $('.xian_hied').css('display', 'none')
    })
    $('.uls .i2').hover(function () {
        $('.weweima').css('display', 'block')
    }, function () {
        $('.weweima').css('display', 'none')
    })
    $('.uls .i4').click(function () {
        $('html,body').animate({//$('html,body')兼容问题body属于chrome
            scrollTop: 0
        })
    })
    $('.close').click(function () {
        $('.xian_hied').toggle()
    })
</script>
</body>
<script src="/common/js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="/order/js/bootstrap.js" type="text/javascript" charset="utf-8"></script>

</html>